import React from 'react';
import {Form,Input,Button,notification,Upload} from 'antd'
import { useNavigate } from 'react-router-dom';
import service from '../../../api'
import './BannerAdd.scss'


function BannerAdd(props) {
    var navigate = useNavigate()

    //表单验证通过执行
    const onFinish = async (values) => {
        var res = await service.banner.banner_add( values );
        if( res.data.code == 200 ){
            notification.success({message:'图片新增成功!'});
            navigate('/index/banner')
        }
    };

    return (
        <div className='banner-add-box'>
            <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 600 }} onFinish={onFinish}>
                <Form.Item label="图片链接" name="link" rules={[{ required: true, message: '请输入轮播图链接' }]}>
                    <Input />
                </Form.Item>

                <Form.Item label="图片提示" name="alt" rules={[{ required: true, message: '请输入轮播图提示' }]}>
                    <Input />
                </Form.Item>

                <Form.Item label="图片地址" name="img" rules={[{ required: true, message: '请输入图片地址' }]} >
                    <Input />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                    <Button type="primary" htmlType="submit">
                        新增图片
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}


export default BannerAdd;